<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <style>
        #list {
            padding: 10px;
        }

        .layui-btn {
            float: right;
        }

        li {
            line-height: 28px;
            vertical-align: center;
        }
    </style>
</head>
<body>
<div id="list">

</div>
</body>
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script src="static/layui/layui.js"></script>
<script>
    var docId = getUrlParam("docId");
    $.getJSON('/file/list?docId=' + docId, function (res) {
        var _html = "<ul>";
        res.data.forEach(function (o) {
            _html += "<li>" + o.originalFileName + "<button class=\"layui-btn layui-btn-xs layui-btn-warm\" onclick='download(\"" + o.id + "\")'>下载</button></li>"
        });
        _html += "</ul>";
        $('#list').html(_html);
    });

    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r != null) return unescape(r[2]);
        return null; //返回参数值
    }

    function download(id) {
        window.open("/file/download?id=" + id);
    }
</script>
</html>